<template>
  <div class="indexPage">
    <div class="part3">
      <div class="part32" @click="alertEl4 = true">
        <span>中奖记录</span>
      </div>
    </div>
    <div class="part5" v-show="alertEl4" @click="alertEl4 = false">
      <div class="part51" @click.stop>
        <div class="part51T">中奖记录</div>
        <div class="part511">
          <div class="part511-emt" v-if="!luckList.length">暂无记录</div>
          <div class="part513" v-for="(item, index) in luckList" :key="index">
            <img class="part5132" src="./img1/a91.png" alt="" />
            <div class="part5131">
              <p>{{ item.sysGood.name }}</p>
              <p>
                <span>{{ item.sysGood.updateTime }}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="part512" @click="alertEl4 = false">
          <img src="./img1/a6.png" alt="" />
        </div>
      </div>
    </div>
    <goldEgg :source="source"></goldEgg>
    <popMsg ref="popMsg" @alertOff="alertOff"></popMsg>
    <wxCode ref="wxCode"></wxCode>
  </div>
</template>

<script>
import popMsg from '../../component/dialog/index1.vue'
import wxCode from './wxCode.vue'
import $utils from '../../utils'
import goldEgg from '../goldEgg'

export default {
  components: {
    popMsg,
    wxCode,
    goldEgg,
  },
  data() {
    return {
      alertEl4: false,
      luckList: [],
      loading: false,
      queryLoad: {},
      source: {
        pageBg: 'https://jszechao.oss-cn-shanghai.aliyuncs.com/1637305742607',
        pageLogo: 'https://jszechao.oss-cn-shanghai.aliyuncs.com/1637305767747',
        pageLogoTop: 10,
        eggBot: 'https://jszechao.oss-cn-shanghai.aliyuncs.com/1637305769673',
        eggBotNum: -30,
        mace: 'https://jszechao.oss-cn-shanghai.aliyuncs.com/1637305773384',
        maceTop: 27,
        egg1: 'https://jszechao.oss-cn-shanghai.aliyuncs.com/1637302109321',
        egg2: 'https://jszechao.oss-cn-shanghai.aliyuncs.com/1637302122689',
        egg3: 'https://jszechao.oss-cn-shanghai.aliyuncs.com/1637302137786',
        luckErrImg: 'https://jszechao.oss-cn-shanghai.aliyuncs.com/1637301583430',
        luckErrTxt: '离奖品就差一点点，加油哦',
        luckFailImg: '',
        luckFailTxt: '',
        luckOkTxt: '恭喜啦',
        activityType: 2,
        final: true,
        limits: 0,
        label: '砸金蛋',
        component: 'goldEggGame',
      },
    }
  },
  onLoad() {},
  mounted() {
    uni.setNavigationBarTitle({
      title: '智慧云银行年末三重礼',
    })
    this.queryLoad = {
      param: localStorage.param || $utils.urlQuery('param'),
      sign: localStorage.sign || $utils.urlQuery('sign'),
    }
    if (this.queryLoad.param && this.queryLoad.sign) {
      localStorage.param = this.queryLoad.param
      localStorage.sign = this.queryLoad.sign
    }
    this.codeokBtn()
    this.luck_list()
  },
  methods: {
    luck_list() {
      this.$api.yunbank.luck_list().then((res) => {
        this.luckList = res.rows
      })
    },
    popUpMsg(i, j, k) {
      this.$refs.popMsg.popUpMsg(i, j, k)
    },
    alertOff() {},
    codeokBtn() {
      if (this.queryLoad.param && this.queryLoad.sign) {
        this.$refs.wxCode.wxCodeSet()
      } else {
        this.popUpMsg(3, '请通过正确的入口参与活动哦', true)
      }
    },
    turnPreFoo() {
      return new Promise((resolve, reject) => {
        if (localStorage.user) {
          this.$api.yunbank
            .getLuck({
              openId: localStorage.user,
            })
            .then((res) => {
              resolve(res.data.name)
            })
            .catch((err) => {
              this.source.luckErrTxt = err.msg
              reject(err)
            })
        } else {
          this.source.luckErrTxt = '网络异常'
          reject('网络异常')
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.indexPage {
  position: relative;
  --main-color: #ef6d42;
  .part3 {
    position: fixed;
    right: 0;
    top: 174rpx;
    z-index: 200;
    span {
      display: inline-block;
      width: 24rpx;
      padding-left: 22rpx;
    }
    .part31 {
      width: 57rpx;
      height: 176rpx;
      color: #c55a13;
      font-size: 24rpx;
      background: url('./img1/a3.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
    }
    .part32 {
      width: 57rpx;
      height: 176rpx;
      color: #fff;
      font-size: 24rpx;
      background: url('./img1/a2.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
    }
  }
  .part5 {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .part51 {
      width: 610rpx;
      height: 850rpx;
      background: url('./img1/a1.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .part51T {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30rpx;
        top: 60rpx;
        color: #fff;
      }
      .part511 {
        width: 500rpx;
        height: 572rpx;
        overflow: hidden;
        overflow-y: auto;
        font-size: 28rpx;
        padding-right: 20rpx;
        line-height: 44rpx;
        color: #333;
      }
      .part511-emt {
        font-size: 28rpx;
        padding-top: 272rpx;
        text-align: center;
        color: #333;
      }
      .part512 {
        position: absolute;
        bottom: 0;
        width: 44rpx;
        height: 44rpx;
        margin: 0 auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .part513 {
        display: flex;
        align-items: center;
        background: rgba(255, 145, 48, 0.1);
        width: 460rpx;
        padding: 20rpx 30rpx;
        .part5132 {
          width: 153rpx;
          height: 87rpx;
        }
        .part5131 {
          font-size: 28rpx;
          margin-left: 40rpx;
          color: #ff9130;
          span {
            font-size: 24rpx;
            line-height: 24rpx;
            color: #ff9130;
          }
        }
      }
    }
    .part52 {
      width: 610rpx;
      height: 636rpx;
      background: url('./img1/a10.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      .part521 {
        padding-top: 78rpx;
        height: 308rpx;
        color: #bf7238;
        font-size: 32rpx;
        line-height: 44rpx;
        .part5211 {
          font-size: 50rpx;
          line-height: 100rpx;
          color: #ff1f30;
        }
        .part52111 {
          font-size: 32rpx;
        }
      }
      .part522 {
        width: 528rpx;
        height: 98rpx;
        line-height: 98rpx;
        background: url('./img1/a4.png') no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
        color: #ff1f30;
        font-size: 32rpx;
        margin-top: 60rpx;
      }
    }
  }
}
</style>
